<template>
  <q-page>
    <div class="row q-pa-sm">
      <div class="col-2 q-pr-sm">
        <q-card flat class="sticky q-pb-sm" :style="'top: ' + topVal">
          <q-tabs
            v-model="tab"
            vertical
            @update:model-value="
              (val) => {
                router.push({
                  path: route.path,
                  query: {
                    tabPage: val,
                  },
                });
              }
            "
            active-color="primary"
          >
            <q-tab name="home" label="数据概览" />
            <q-tab name="article" label="文章管理" />
            <q-tab name="draft" label="草稿箱" />
          </q-tabs>
        </q-card>
      </div>
      <div class="col">
        <q-tab-panels
          v-model="tab"
          animated
          swipeable
          vertical
          keep-alive
          transition-prev="jump-up"
          transition-next="jump-up"
        >
          <q-tab-panel name="home" class="q-pa-none">
            <ChartPanel></ChartPanel>
          </q-tab-panel>
          <q-tab-panel name="article" class="q-pa-none">
            <ArticlePanel></ArticlePanel>
          </q-tab-panel>
          <q-tab-panel name="draft" class="q-pa-none">
            <DraftPanel></DraftPanel>
          </q-tab-panel>
        </q-tab-panels>
      </div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import ChartPanel from './ChartPanel.vue';
import ArticlePanel from './ArticlePanel.vue';
import DraftPanel from './DraftPanel.vue';
import { useRoute, useRouter } from 'vue-router';
import { useWebStore } from 'src/stores/webStore';
import { storeToRefs } from 'pinia';
import { watch } from 'vue';

const route = useRoute();
const router = useRouter();
const tab = ref('home');
const { topVal } = storeToRefs(useWebStore());

onMounted(() => {
  tab.value = (route.query.tabPage as string) || 'home';
});

watch(
  () => {
    return route.query;
  },
  (newVal) => {
    tab.value = (newVal.tabPage as string) || 'home';
  },
);
</script>

<style scoped></style>
